<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/head :: head"></head>

<body>
<!-- Wrapper -->
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper" th:replace="fragments/nav :: nav"></div>
    <!-- #Sidebar -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1 th:text="${title}">TITLE</h1>
                    <div th:if="${error != null}" th:text="${error}" class="alert alert-danger" role="alert">Error message</div>
                    <form id="emailForm" method='post'>
                        <fieldset>
                            <div class="form-group">
                                <label class="control-label" for="emailId">Email Id:</label>
                                <div>
                                    <input id="emailId" name="emailId" type="text"
                                           class="form-control input-md" size="25" required="true"
                                           disabled="true" th:value="${email.getEmailId()}" />
                                </div>
                            </div>
                            <div class="form-group" id="hourDiv" name="hourDiv">
                                <label class="control-label" for="sendOutHour">Send Out Hour(0-23):</label>
                                <div>
                                    <input id="sendOutHour" name="sendOutHour" type="number"
                                           class="form-control input-md" size="25" th:value="${email.getSendOutHour()}" max="23" th:required="true" onchange="updateMetadata()"/>
                                </div>
                            </div>
                            <div class="form-group" id="minuteDiv" name="minuteDiv">
                                <label class="control-label" for="sendOutMinute">Send Out Minute(0-59):</label>
                                <div>
                                    <input id="sendOutMinute" name="sendOutMinute" type="number"
                                           class="form-control input-md" size="25" th:value="${email.getSendOutMinute()}" max="59" th:required="true" onchange="updateMetadata()"/>
                                </div>
                            </div>
                            <div class="form-group" id="triggerSection">
                                <label class="control-label" for="trigger">Trigger Interval:</label>
                                <p id="defaultTriggerMsg" class="bg-info">Select the trigger interval to send out email .
                                    <code>Default: 'instant' i.e. as soon as report is available</code></p>
                                <div>
                                    <select id="trigger" name="trigger" class="form-control"
                                            th:field="*{emailTriggers}" th:required="true" onchange="updateMetadata()">
                                        <option th:each="trigger : ${emailTriggers}"
                                                th:value="${trigger}"
                                                th:selected="${trigger} == ${email.getRepeatInterval()} ? true : false"
                                                th:text="${trigger}"></option>
                                    </select>
                                </div>
                            </div>
                            <div id="updateActions" class="form-group">
                                <label class="control-label" for="submit">Action:</label>
                                <div>
                                    <!--Show update button for update-->
                                    <span id="updateButton">
                                        <input id="submit" type="submit" class="btn btn-success" value="Update" disabled="true"/>
                                    </span>
                                    <!--Show cancel button to cancel-->
                                    <span id="cancelButton" hidden="true">
                                        <div id="cancel" class="btn btn-danger" onclick="backToEmailInfo()">Cancel</div>
                                    </span>
                                    <!--Show delete button to delete-->
                                    <span id="deleteButton">
                                        <div id="delete" class="btn btn-danger" onclick="deleteEmail()">Delete</div>
                                    </span>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script language="javascript" type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		if ([[${email.getRepeatInterval()}]] === 'instant') {
            $('#sendOutHour').attr("disabled", true);
            $('#hourDiv').attr("hidden", true);
            $('#sendOutMinute').attr("disabled", true);
            $('#minuteDiv').attr("hidden", true);
		} else if([[${email.getRepeatInterval()}]] === 'hour') {
            $('#sendOutHour').attr("disabled", true);
            $('#hourDiv').attr("hidden", true);
            $('#sendOutMinute').attr("disabled", false);
            $('#minuteDiv').attr("hidden", false);
		}
		$('#submit').attr("disabled", true);
	});

	$("#emailForm").submit(function(e) {
        e.preventDefault();
        var data = {};
        data.emailId = $('#emailId').val();
        data.sendOutHour = $('#sendOutHour').val();
        data.sendOutMinute = $('#sendOutMinute').val();
        data.repeatInterval = $('#trigger').val();
        $.ajax({
            type: 'POST',
            url: '/UpdateEmail',
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: 'text',
            success: function (response, status, jQxhr) {
                if (status === 'success') {
                    showInfoMessage("Email info updated successfully.");
                    setTimeout(function() {
                        window.location.href = '/Emails/' + $('#emailId').val();
                    }, 1500);
                } else {
                    showErrorMessage("Something went wrong in updating email info! Try again.");
                }
            },
            error : ajaxMessage
        });
        return;
    });

    $('#sendOutHour').on('input', function() {
        updateMetadata();
    });

    $('#sendOutMinute').on('input', function() {
        updateMetadata();
    });

    function updateMetadata() {
        if ($('#trigger').val() === 'instant') {
            $('#sendOutHour').attr("disabled", true);
            $('#sendOutMinute').attr("disabled", true);
            $('#hourDiv').attr("hidden", true);
            $('#minuteDiv').attr("hidden", true);
		} else if($('#trigger').val() === 'hour') {
            $('#sendOutMinute').attr("disabled", false);
            $('#minuteDiv').attr("hidden", false);
            $('#sendOutHour').attr("hidden", true);
            $('#hourDiv').attr("hidden", true);
		} else {
		    $('#sendOutHour').attr("disabled", false);
		    $('#hourDiv').attr("hidden", false);
            $('#sendOutMinute').attr("disabled", false);
            $('#minuteDiv').attr("hidden", false);
        }
		$('#submit').attr("disabled", false);
        $('#cancelButton').attr("hidden", false);
        $('#deleteButton').attr("hidden", true);
    }

    function backToEmailInfo() {
        window.location.href = '/Emails/' + $('#emailId').val();
    }

    function deleteEmail() {
        var data = {};
        data.emailId = $('#emailId').val();
        $.ajax({
            type: 'POST',
            url: '/DeleteEmail',
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: 'text',
            success: function (response, status, jQxhr) {
                if (status === 'success') {
                    showInfoMessage("Email info deleted successfully.");
                    setTimeout(function() {
                        window.location.href = '/Meta-Manager';
                    }, 1500);
                } else {
                    showErrorMessage("Something went wrong while deleting email! Try again.");
                }
            },
            error : ajaxMessage
        });
        return;
    }

/*]]>*/
</script>

</body>

</html>
